<template>
  <div>
    <div style="width: 60%;text-align: left;margin-left: 0">
      <span
        style="font-size: 48px; display: inline-block;vertical-align: middle;width: 20%"
        >米铺优选</span
      >
      <div
        style="display: inline-block;vertical-align: middle;width: 80%;text-align: center"
      >
        <el-image
          src="/api/image/gg.png"
          style="height: 100%;"
          fit="fill"
          @click="hrefToTbao"
        />
      </div>
    </div>
    <div style="text-align: left">
      <el-button type="primary" icon="el-icon-arrow-left" @click="back"
        >返回</el-button
      >
    </div>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="width: 60%; margin-left: 0;"
    >
      <el-form-item label="软件图标:">
        <el-image
          style="width: 100px; height: 100px ;"
          :src="imageUrl + '/image/' + form.logo"
          fit="cover"
        ></el-image>
        <el-link :href="imageUrl + '/apk/' + form.apk" type="primary"
          >下载安装包</el-link
        >
      </el-form-item>
      <el-form-item label="软件名称:">
        <span>{{ form.name }}</span>
      </el-form-item>
      <el-form-item label="版本号:">
        <span>{{ form.version }}</span>
      </el-form-item>
      <el-form-item label="大小:">
        <span>{{ form.size }}</span>
      </el-form-item>
      <el-form-item label="软件简介:">
        <span>{{ form.description || "无" }}</span>
      </el-form-item>
      <el-form-item label="上传时间:">
        <span>{{ timestampToTime(form.postdate) }}</span>
      </el-form-item>
      <el-form-item label="标签:">
        <span>{{
          form.type === 0
            ? "常用软件"
            : form.type === 1
            ? "影音软件"
            : "桌面图标"
        }}</span>
      </el-form-item>
      <el-form-item label="软件截图:">
        <div class="img-list">
          <div class="img-content" v-for="(item, key) in fileList" :key="key">
            <el-image fit="scale-down" :src="item.url" style="height: 190px" />

            <!-- 放大icon -->
            <div class="layer" @click="handleFileEnlarge(item.url)">
              <i class="el-icon-view"></i>
            </div>
          </div>
        </div>
        <el-dialog
          title=""
          :visible.sync="isEnlargeImage"
          size="large"
          :modal-append-to-body="false"
          top="8%"
          width="60%"
        >
          <img
            @click="isEnlargeImage = false"
            style="width:100%;"
            :src="enlargeImage"
            alt="预览大图"
          />
        </el-dialog>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import router from "@/router";

export default {
  name: "ShowApp",
  data() {
    return {
      form: {
        id: null,
        logo: "1602423265822.png",
        name: "软件编辑失效，请选择",
        version: "重新",
        size: "重新",
        description: null,
        postdate: 1602423266200,
        pictures: null,
        type: 0,
        apk: "1602423265799.apk"
      },
      imageUrl: this.$store.state.orgin,
      fileList: [],
      isEnlargeImage: false, //放大图片
      enlargeImage: "" //放大图片地址
    };
  },
  methods: {
    onSubmit() {},
    getParams() {
      // 取到路由带过来的参数
      this.form = this.$route.params.data;
    },
    getPicture() {
      if (this.form.pictures === null) return;
      let split = this.form.pictures.split("|");
      split.forEach(value =>
        this.fileList.push({
          name: value,
          url: this.imageUrl + "/image/" + value
        })
      );
    },
    handleFileEnlarge(_url) {
      //放大图片
      console.log(_url);
      if (_url) {
        this.enlargeImage = _url;
        this.isEnlargeImage = !this.isEnlargeImage;
      }
    },
    hrefToTbao() {
      window.location.href = "https://mipuyouxuan.taobao.com/";
    },
    timestampToTime(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    back() {
      router.go(-1);
    }
  },
  created() {
    this.getParams();
    this.getPicture();
  }
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.img-list {
  overflow: hidden;
  width: 100%;
}
.img-list .img-content {
  float: left;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  padding: 5px;
  margin: 5px 20px 20px 0;
  border: 1px solid #d1dbe5;
  border-radius: 4px;
  transition: all 0.3s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
}
.img-list .img-content img {
  display: block;
  width: 100%;
  height: 190px;
  margin: 0 auto;
  border-radius: 4px;
}
.img-list .img-content .name {
  margin-top: 10px;
}
.img-list .img-content .name > div {
  width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
  height: 25px;
  line-height: 25px;
}
.img-list .img-content:hover .del,
.img-list .img-content:hover .layer {
  opacity: 1;
}
.img-list .img-content .del,
.img-list .img-content .layer {
  opacity: 0;
  transition: all 0.3s;
}
.img-list .img-content .del {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: #8492a6;
  cursor: pointer;
  font-size: 1.1em;
}
.img-list .img-content .layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200px;
  color: #fff;
  text-align: center;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.4);
}
.img-list .img-content .layer i {
  font-size: 1.6em;
  margin-top: 80px;
}
</style>
